import React, { Component } from 'react';
import Box from './box';

class Boxes extends Component {
    constructor() {
        super();
        // console.log("Boxes Constructor")
    }

    componentDidMount() {
        // console.log("Boxes Mount")
    }

    componentDidUpdate() {
        // console.log("Boxes Update");
    }

    componentWillUnmount() {
        console.log("Boxes Unmount");
    }

    // setX = (box) => {
    //     let boxes = [...this.state.boxes];
    //     const k = boxes.indexOf(box);
    //     boxes[k] = { ...box };
    //     console.log(box.x);

    //     this.setState({boxes});
    // }

    render() {
        console.log("Boxes Render");

        return (<React.Fragment>
            <button type='button' className='btn btn-secondary m-2' onClick={this.props.ClickReset}>Reset</button>
            {this.props.boxes.map(
                box =>
                    (<Box 
                        key={box.id}
                        box={box}
                        onClickLeft={this.props.ClickLeft}
                        onClickRight={this.props.ClickRight}
                        onClickDelete={this.props.ClickDelete}
                    >
                    </Box>)

            )}
        </React.Fragment>);
    }
}

export default Boxes; 